// 用户登录展示界面
<template>
  <div class="login_container">
    <!-- 粒子背景 -->
    <div id="login">
      <vue-particles
        class="login-bg"
      color="#39AFFD"
      :particleOpacity="0.7"
      :particlesNumber="100"
      shapeType="circle"
      :particleSize="4"
      linesColor="#8DD1FE"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      >
      </vue-particles>
    </div>
    <!-- 图标区域 -->
    <div class="login_box">
      <div class="avatar_box">
        <img src="../assets/images/logo.png" alt="" />
      </div>

      <div class="ylogo_box">
        <img src="../assets/images/ylogo.png" alt="" />
      </div>

      <div class="mlogo_box">
        <img src="../assets/images/mlogo.png" alt="" />
      </div>

      <!-- 登录表单区域 -->
      <!-- @submit.native.prevent  关闭默认提交方式，添加native-type="submit" 回车提交 -->
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="80px" class="login_form" @submit.native.prevent>
        <!-- 用户名 -->
        <el-form-item prop="email">
          <el-input
            v-model="loginForm.email"
            placeholder="邮箱"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <!-- 按钮区 -->
        <el-form-item>
          <!-- native-type="submit" 回车提交 -->
          <el-button type="primary" class="el-button-dl" @click="login" native-type="submit">
            登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button plain @click="pass">忘记密码</el-button >
          <el-button plain class="el_button_zc" @click="register">账号注册</el-button>
        </el-form-item>
      </el-form>
      
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义默认路由跳转界面
      parameter: '/home',
      //登录表单的数据绑定对象
      loginForm: {
        email: '',
        password: '', 
      },
      //表单的验证规则对象
      loginFormRules: {
        //验证用户名是否合法
        email: [
          /* required 是否为必填项  message:提示信息 trigger:出发条件 */
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { min: 3, max: 30, message: "长度在 3到 30 个字符", trigger: "blur" }
        ],
        //验证密码是否合法
        password: [
          /* required 是否为必填项  message:提示信息 trigger:出发条件 */
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 30, message: "长度在 3到 30 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    login() {
      // this:代表的是组件对象（当前对象 --内层对象 ，外层对象是vue对象）
      // console.log(this);
      //1.获取表单数据
      this.$refs.loginFormRef.validate(async valid => {
        //2.当程序没有通过校验时 程序终止
        if (!valid) return

        //3.发起ajax请求, 实现业务调用
        //参数1: url地址   参数2:传递的数据
        let { data: result } = await this.$http.post(
          "/user/login",
          this.loginForm,
          console.log(this.loginForm),
        );

        //4.判断用户校验是否正常 status=200  201 202 203 204
        if (result.isValid == 206){
          console.log(result.isValid)
          return this.$message.error("该用户不存在或未激活！");
        }
        else if(result.isValid == 203){
          console.log(result.isValid)
          return this.$message.error("账号异常，请联系爱忆港客服!");
        }else if(result.isValid == 207){
          console.log(result.isValid)
          return this.$message.error("用户名或密码错误!");
        }else {
          this.$message.success("恭喜您！登录成功");
        }
        

        //如何获取token result.data
        //将用户信息保存到session中
        window.sessionStorage.setItem("token", result.data);
        //window.sessionStorage.removeItem("token") 删除单个
        //window.sessionStorage.clear() //全部删除

        //5.登录成功之后,跳转到/home页面中
        this.$router.push({path: this.parameter });
      });
    },
    // 忘记密码页面跳转
    pass() {
      this.parameter = '/pass';
      this.$router.push({path: this.parameter });
      
    },
    // 账号注册页面跳转
    register() {
      this.parameter = '/register';
      this.$router.push({path: this.parameter });
      
    }
    }
  }

</script>

<style lang="less" scoped>
.login{
    width: 100%;
    height: 100%;
    //color: #cccccc; 
    /*如果想做背景图片 可以给标签一个class 直接添加背景图*/
    //position: relative;
}
// 如果屎全屏展示
.login-bg{
    width: 100%;
    height: 100%;
    background-image: url(../assets/login.png);
}



.login_container {
  background-image: url(../assets/login.png);
  height: 100%;
}

.login_box {
  width: 600px;
  height: 350px;
  // background-color: antiquewhite;
  border-radius: 3px;
  position: absolute;
  left: 48%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    height: 100px;
    width: 220px;
    position: absolute;
    left: 10%;
    transform: translate(0, -100%);
    img {
      width: 100%;
      height: 100%;
    }
  }

  .mlogo_box {
    height: 50px;
    width: 50px;
    position: absolute;
    left: 20%;
    top: 27%;
    transform: translate(-20%, -27%);
    img {
      height: 40px;
      width: 40px;
    }
  }

  .ylogo_box {
    height: 50px;
    width: 50px;
    position: absolute;
    left: 20%;
    top: 6%;
    transform: translate(-20%, -6%);
    img {
      height: 40px;
      width: 40px;
    }
  }
}

.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 80px;
  box-sizing: border-box;

  .el_button_zc {
    position: absolute;
    left: 95%;
    top: 95%;
    transform: translate(-95%, -95%);
  }

  .el-button-dl {
    width: 360px;
  }
}
</style>
